﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Basic Table</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            
            var sheet = spread.getSheet(0);
            var source = [
                { Course: "Calculus", Term: 1, Credit: 5, Score: 80, Teacher: "Nancy.Feehafer" },
                { Course: "P.E.", Term: 1, Credit: 3.5, Score: 85, Teacher: "Andrew.Cencini" },
                { Course: "Political Economics", Term: 1, Credit: 3.5, Score: 95, Teacher: "Jan.Kotas" },
                { Course: "Basic of Computer", Term: 1, Credit: 2, Score: 85, Teacher: "Steven.Thorpe" },
                { Course: "Micro-Economics", Term: 1, Credit: 4, Score: 62, Teacher: "Jan.Kotas" },
                { Course: "Linear Algebra", Term: 2, Credit: 5, Score: 73, Teacher: "Nancy.Feehafer" },
                { Course: "Accounting", Term: 2, Credit: 3.5, Score: 86, Teacher: "Nancy.Feehafer" },
                { Course: "Statistics", Term: 2, Credit: 5, Score: 85, Teacher: "Robert.Zare" },
                { Course: "Marketing", Term: 2, Credit: 4, Score: 70, Teacher: "Laura.Giussani" }
            ];
            spread.isPaintSuspended(true);
            var table = sheet.addTableByDataSource("Table1", 2, 1, source, spreadNS.TableStyles.medium2());
            table.showFooter(true);
            table.showHeader(true);
            table.highlightFirstColumn(true);
            table.highlightLastColumn(false);
            table.setColumnFormula(2, "=SUM(D4:D12)");
            table.setColumnFormula(3, "=SUM(E4:E12)");
            table.setColumnValue(0, "Total");
            sheet.setColumnWidth(0, 20);
            sheet.setColumnWidth(1, 130);
            sheet.setColumnWidth(2, 70);
            sheet.setColumnWidth(3, 70);
            sheet.setColumnWidth(4, 70);
            sheet.setColumnWidth(5, 100);
            spread.isPaintSuspended(false);
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
</div>
</body>
</html>
